<template>
  <div class="index-main">
    <div class="index-header">
      <div class="systemName">
        <img src="../assets/backgroundImage/guohui.png">
        <div class="name">卷宗管理系统</div>
      </div>
      <div class="index-header-logo"></div>
      <div class="index-header-user">
        <el-popover placement="bottom" trigger="click" popper-class="pop-exit" v-model="bShowUserOperation">
          <el-button type="text" size="mini" style="width: auto; text-align: center" @click="handleEdit">修改密码</el-button>
          <el-button type="text" size="mini" style="width: auto; text-align: center" @click="handleExit">退出</el-button>
          <div slot="reference" class="index-header-right-user-name">
            <span class="index-header-right-user-name-text">{{ $store.getters.userObj.realName }}</span>
            <i :class="bShowUserOperation ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </div>
        </el-popover>
      </div>
    </div>

    <div class="index-menu">
      <div v-for="(item, index) in menuList" :key="item.id" class="index-menu-item" :class="{ active: index === currentMenuIndex }" @click="handleChangeMenu(index)">{{ item.name }}</div>
    </div>
    <div class="index-body">
      <div v-show="!bFullscreen" class="index-sub-menu">
        <!-- 一级菜单 -->
        <el-menu :default-active="activeMenu" class="index-menu-body" background-color="#222d32" text-color="#b8c7ce" active-text-color="#fff" unique-opened router>
          <template v-for="(menu, index) in menuList">
            <template v-if="index === currentMenuIndex">
              <template v-for="item in menu.children">
                <!-- 二级菜单-->
                <template v-if="!item.children || item.children.length === 0">
                  <el-menu-item :index="item.component" :key="item.component">
                    <i :class="'icon-ali-' + item.component"></i>
                    <span slot="title">{{ item.name }}</span>
                  </el-menu-item>
                </template>
                <template v-else>
                  <el-submenu :index="item.component" class="sub-menu" :key="item.component">
                    <template slot="title">
                      <i :class="'icon-ali-' + item.component"></i>
                      <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="subItem in item.children" :key="subItem.component" :index="subItem.component">
                      <span slot="title">{{ subItem.name }}</span>
                    </el-menu-item>
                  </el-submenu>
                </template>
              </template>
            </template>
          </template>
        </el-menu>
      </div>
      <div class="index-content" :style="{ padding: bFullscreen ? '0' : '20px' }">
        <div class="index-content-body" :style="{ padding: bFullscreen ? '0' : '20px', border: bFullscreen ? 'none' : '1px solid #ddd' }">
          <navigator v-show="!bFullscreen" :navigatorList="navigatorList"></navigator>
          <router-view class="index-content-view" />
        </div>
      </div>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="460px" :close-on-click-modal="false">
      <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" size="medium">
        <el-form-item label="原密码" prop="password">
          <el-input v-model="addForm.password" type="password" clearable></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="addForm.newPassword" type="password" clearable></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="newPassword2">
          <el-input v-model="addForm.newPassword2" type="password" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { isEmpty } from '../utils/util'
import Navigator from '../components/navigator'
import { getCurrentMenuIndex, getNavigatorMenuList, getFirstMenu } from '../utils/menu'
export default {
  name: 'index',
  components: { Navigator },
  data() {
    let checkNewPassword = (rule, value, callback) => {
        setTimeout(() => {
          if (rule.required && isEmpty(value)) {
            callback(new Error('请输入新密码'))
          }
          if (value) {
            if (value.length < 8) {
              callback(new Error('密码最小长度为8'))
            } else if (value.length > 20) {
              callback(new Error('密码最大长度为20'))
            } else {
              let reg = /.*[a-z]+.*/,
                reg1 = /.*[A-Z]+.*/,
                reg2 = /.*[0-9]+.*/
              if (reg.test(value) === false) {
                return callback(new Error('密码必须包含小写字母'))
              } else if (reg1.test(value) === false) {
                return callback(new Error('密码必须包含大写字母'))
              } else if (reg2.test(value) === false) {
                return callback(new Error('密码必须包含数字'))
              }
            }
          }
          callback()
        }, 200)
      },
      checkNewPassword2 = (rule, value, callback) => {
        setTimeout(() => {
          if (rule.required && isEmpty(value)) {
            callback(new Error('请重复新密码'))
          }
          if (value) {
            if (value.length < 8) {
              callback(new Error('密码最小长度为8'))
            } else if (value.length > 20) {
              callback(new Error('密码最大长度为20'))
            } else {
              let reg = /.*[a-z]+.*/,
                reg1 = /.*[A-Z]+.*/,
                reg2 = /.*[0-9]+.*/
              if (reg.test(value) === false) {
                return callback(new Error('密码必须包含小写字母'))
              } else if (reg1.test(value) === false) {
                return callback(new Error('密码必须包含大写字母'))
              } else if (reg2.test(value) === false) {
                return callback(new Error('密码必须包含数字'))
              } else if (value !== this.addForm.newPassword) {
                callback(new Error('两次输入的密码不一致'))
              }
            }
          }
          callback()
        }, 200)
      }
    return {
      activeMenu: this.$route.name,
      menuList: [],
      currentMenuIndex: 0,
      navigatorList: [],
      bShowUserOperation: false,
      dialogVisible: false,
      addForm: {
        password: '',
        newPassword: '',
        newPassword2: ''
      },
      addRules: {
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        newPassword: [{ required: true, validator: checkNewPassword, trigger: 'blur' }],
        newPassword2: [{ required: true, validator: checkNewPassword2, trigger: 'blur' }]
      },
      url: {
        logout: '/auth/logout'
      }
    }
  },
  computed: {
    bFullscreen() {
      return this.$route.name === 'stat'
    }
  },
  watch: {
    $route(to) {
      this.activeMenu = to.name
      this.navigatorList = getNavigatorMenuList.call(this, to.name)
      this.currentMenuIndex = getCurrentMenuIndex.call(this, to.name)
    }
  },
  created() {
    // 获取所有菜单 vue里面 store 文件夹下 getters 里面 menuList
    this.menuList = this.$store.getters.menuList
      // console.log("111")
      // console.log(this.menuList)
    const code = this.$route.name
    this.currentMenuIndex = getCurrentMenuIndex.call(this, code)
    this.activeMenu = code
    this.navigatorList = getNavigatorMenuList.call(this, code)
    // console.log("222")
    // console.log(this.navigatorList)
    // 加载路由
    if (code === 'index') {
      this.handleChangeMenu(0)
    }
  },
  methods: {
    handleChangeMenu(index) {
      this.currentMenuIndex = index
      let code = getFirstMenu.call(this, index)
      if (!isEmpty(code)) {
        this.$router.push('/' + code)
      }
    },
    handleEdit() {
      this.addForm = {
        password: '',
        newPassword: '',
        newPassword2: ''
      }
      this.dialogVisible = true
      if (!isEmpty(this.$refs.addForm)) {
        this.$refs.addForm.resetFields()
      }
    },
    updateConfirm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          let form = {
            originalPwd: this.addForm.password,
            newPwd: this.addForm.newPassword
          }
          this.$http
            .post('/boot/sys/user/updatePassword', form)
            .then(() => {
              this.$message.success('密码修改成功')
              this.dialogVisible = false
            })
            .catch(() => {
              this.$message.error('密码修改失败')
            })
        } else {
          return false
        }
      })
    },
    handleExit() {
      this.$http.post(this.url.logout).then(() => {
        this.$http.defaults.headers.common['Authorization'] = ''
        sessionStorage.clear()
        this.$store.dispatch('setUserInfo', {})
        this.$store.dispatch('setToken', '')
        this.$store.dispatch('setMenuList', [])
        this.$store.dispatch('setRouterList', [])
        this.$router.push('/login')
      })
    }
  }
}
</script>
<style scoped>
.index-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 最上面一行样式 */
.index-header {
  width: 100%;
  /*height: 60px;*/
  height: 50px;
  background: #526CF5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 50px;
}

.index-header img {
  float: left;
  width: 37px;
  height: 37px;
  line-height: 50px;
  margin-right: 10px;
  margin-top: 6px;
}

.index-header .systemName .name{
  float: left;
  font-size: 20px;
  font-weight: bold;
  color: white;
  height: 50px;
  line-height: 50px;
}
.index-header-right-user-name {
  color: white;
  font-size: 14px;
}
.index-header-right-user-name-text {
  margin-right: 8px;
}
.index-menu {
  width: 100%;
  height: 50px;
  /*background: #511fd2;*/
  background: #3745B1;
  border-bottom: 1px solid #3D6FF3;
  display: flex;
  align-items: center;
}
.index-menu-item {
  width: 100px;
  height: 100%;
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.index-menu-item.active,
.index-menu-item:hover {
  background: #3E53D3;
}
.index-body {
  flex: 1;
  width: 100%;
  display: flex;
}
.index-sub-menu {
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.index-content {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  background: #e8ecef;
}
.index-content-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: white;
}
.index-content-view {
  flex: 1;
  width: 100%;
}
.index-menu-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: none;
}
.index-menu-body:not(.el-menu--collapse) {
  width: 200px;
}
.index-menu-body .el-menu-item i,
.info-menu-item i {
  color: white;
  padding-right: 15px;
}
.index-menu-body .el-menu-item.is-active i {
  color: inherit;
}
.index-menu-body .el-submenu__title i {
  color: white;
  padding-right: 15px;
}
.index-menu-body.el-menu--collapse .el-menu-item i {
  padding-right: 0;
}
.index-menu-body.el-menu--collapse .el-submenu__title i {
  padding-left: 0;
  padding-right: 0;
}
.sub-menu ul li span {
  margin-left: 30px;
}
</style>
